<template>
	<view class="packageItem" :class='{active}' @click='chooseThis(data)'>
		<view class="time" v-if="data.activeVipPriceUnEffectDate - 0 > 0 && showtime">
			<image src="../../static/newicons/text.png" class="text" mode=""></image>
			<view class="seconds">
				{{text}}
			</view>
		</view>
		<view class="name">{{data.vipName}}</view>
		<view class="money">￥{{data.activeVipPrice}}</view>
		<view class="moneyLine">￥{{data.vipPrice}}</view>
		<view class="dayFee">
			{{parseFloat((data.vipPrice/data.effectTime).toFixed(2))}} 元/天
		</view>
	</view>
</template>

<script>
	export default {
		name:"vipItem",
		props: {
			data: {
				type: Object,
				default: () => ({})
			},
			active: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			data: {
				deep: true,
				immediate: true,
				handler: function(val,old) {
					if(val.activeVipPriceUnEffectDate - 0 > 0) {
						this.countDown()
					}
				}
			}
		},
		methods: {
			addZero(n) {
				return n < 10 ? `0${n}` :n
			},
			setTimeText(time) {
				const hours = Math.floor(time/3600)
				const minutes = Math.floor((time%3600)/60)
				const seconds = time%60
				this.text = `${this.addZero(hours)}:${this.addZero(minutes)}:${this.addZero(seconds)}`
			},
			countDown() {
				if(this.interval) {
					clearInterval(this.interval)
				}
				let {activeVipPriceUnEffectDate:time} = this.data;
				this.setTimeText(time)
				this.interval = setInterval(() => {
					time --;
					if(time < 0) {
						this.showtime = false;
						clearInterval(this.interval)
						return;
					}
					this.setTimeText(time)
				},1000)
			},
			chooseThis(item) {
				this.$emit('choose',item)
			}
		},
		data() {
			return {
				interval: null,
				text: '',//倒计时的文字
				showtime: true
			};
		}
	}
</script>

<style lang="scss" scoped>
.packageItem {
	width: 195rpx;
	height: 276rpx;
	display: inline-block;
	border: 2px solid #393C5F;
	border-radius: 30rpx;
	background: #1E2039;
	text-align: center;
	padding-top: 53rpx;
	position: relative;
	margin-top: 48rpx;
	.time {
		position: absolute;
		width: 153rpx;
		border-radius: 22rpx;
		background: linear-gradient(-54deg, #FD3E2B 0%, #FC492D 99%);
		padding: 8rpx 14rpx;
		box-sizing: border-box;
		text-align: center;
		font-size: 24rpx;
		color: #FFF0C6;
		top: -48rpx;
		left: 0;
		right: 0;
		margin: auto;
		.text {
			width: 100%;
			height: 30rpx;
			display: block;
		}
	}
	&+.packageItem {
		margin-left: 17rpx;
	}
	&.active {
		background: linear-gradient(-54deg, #F5A742 0%, #FFDBA0 99%);
		.name {
			font-size: 28rpx;
			color: #060606;
			line-height: 1;
			margin-bottom: 16rpx;
		}
		.money {
			font-size: 59rpx;
			color: #C52C1A;
			line-height: 1;
			margin-bottom: 25rpx;
		}
		.moneyLine {
			font-size: 28rpx;
			color: #A3744A;
			text-decoration: line-through;
			margin-bottom: 18rpx;
		}
		.dayFee {
			text-align: center;
			font-size: 30rpx;
			color: #C02C18;
		}
	}
	.name {
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 1;
		margin-bottom: 16rpx;
		font-weight: 600;
	}
	.money {
		font-size: 59rpx;
		color: #F1C387;
		line-height: 1;
		margin-bottom: 25rpx;
		font-weight: 600;
	}
	.moneyLine {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.5);
		text-decoration: line-through;
		margin-bottom: 18rpx;
	}
	.dayFee {
		text-align: center;
		font-size: 30rpx;
		color: rgba(255, 255, 255, 0.5);
	}
}
</style>